<template>
  <div class="mission-card">
    <div class="mission-card__header">
      {{ title }}
      <span class="mission-card__header-line"></span>
    </div>
    <div class="mission-card__content">
      <div v-for="item in options" :key="item.id" class="mission-item">
        <div class="mission-item__info">
          <div className="mission-item__info-name">
            {{ item.name }}
          </div>
          <div class="mission-item__info-count">
            积分＋{{ item.targetCount }}
          </div>
        </div>
        <div
          :class="[disabled && 'is-disabled']"
          class="achieve-btn"
          @tap="onSelect(item)"
        >
          {{ disabled ? "已完成" : "去完成" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ISelfMissionItem } from "@/apis/types/knowledge";
import Taro from "@tarojs/taro";
import { DUCUMENT_CATEGORY_ID } from "@/constants/index";
defineOptions({
  name: "mission-card",
});

withDefaults(
  defineProps<{
    title: string;
    disabled?: boolean;
    options: ISelfMissionItem[];
  }>(),
  {
    title: "",
    disabled: false,
  }
);

const onSelect = (data: ISelfMissionItem) => {
  const { actionRelatedData } = data;

  Taro.setStorageSync(DUCUMENT_CATEGORY_ID, actionRelatedData);
  Taro.switchTab({
    url: `/pages/document/index`,
  });
};
</script>

<style lang="less">
.mission-card {
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  &__header {
    position: relative;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 32px;
    color: #000000;
    // line-height: 44px;
    padding: 20px 30px;
    border-bottom: 1px solid #e2e3e6;
    &-line {
      position: absolute;
      transform: translate(0, -50%);
      left: 0;
      top: 50%;
      background: #60b89b;
      width: 8px;
      height: 32px;
    }
  }
  &__content {
    box-sizing: border-box;
    padding: 20px 30px;
    .mission-item {
      padding: 12px 0;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 20px;
      &:not(:last-child) {
        border-bottom: 1px solid #e2e3e6;
        margin-bottom: 20px;
      }
      &__info {
        width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        &-name {
          width: 100%;
          font-weight: 400;
          font-size: 28px;
          color: #000000;
          line-height: 40px;

          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        &-count {
          font-weight: 400;
          font-size: 24px;
          color: #8b8b8b;
          line-height: 34px;
        }
      }
      .achieve-btn {
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(#fff6ea, #fdeecc);
        padding: 2px 20px;
        font-weight: 400;
        font-size: 24px;
        color: #9d4a0a;
        line-height: 34px;
        border-radius: 16px;
        &.is-disabled {
          background: #f3f3f3;
          color: #8b8b8b;
        }
      }
    }
  }
}
</style>
